<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-pie-chart"></i> schart图表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="plugins-tips">
                vue-schart：vue.js封装sChart.js的图表组件。测试测试测试
                访问地址：
                <a
                    href="https://github.com/lin-xin/vue-schart"
                    target="_blank"
                >vue-schart</a>
            </div>

            <div class="schart-box">
                <div class="content-title">饼状图</div>
                <schart class="schart" canvasId="pie" :options="options3"></schart>
            </div>
        </div>
    </div>
</template>

<script>
import Schart from 'vue-schart';
export default {
    name: 'basecharts',
    components: {
        Schart
    },
    //数据部分
    data() {
        return {
            options3: {
                /**
                 * type:表示图的类型 pie：饼图  ring：环形图  line :折线图  bar（默认):柱状图
                 */
                type: 'pie',
                title: {
                    //图的标题 ，还有相关配置查阅文档
                    text: '热点标题分布图',
                },
                //半径
                radius:150,
                //图例相关配置
                legend: {
                    //位置
                    position: 'left'
                },
                //背景颜色
                bgColor: '#fbfbfb',
                //饼状每个扇形的分类或名称，用于图例文本
                labels: [],
                //数据集
                datasets: [
                    //数据
                    {
                        data: []
                    }
                ]
            },
        };
    },
    //生命周期钩子函数   当页面被创建即加载该方法
    created() {
        this.loadData()
    },
    //方法区
    methods:{
        //加载数据
        loadData(){
            this.$axios.get('/home/hotsgroup').then((res)=>{
                console.log(res)
                //处理res  把title装到labels   把count装到data
                let arrLabels=[];
                let arrCount=[];
                for(let i of res.data){
                    arrLabels.push(i.title);//将每一个数组元素的title放进去
                    arrCount.push(i.count);//将每一个数组元素的count放进去
                }
                //给配置项里的labels赋值
                this.options3.labels=arrLabels;
                this.options3.datasets[0].data=arrCount;
            })
        }
    }

};
</script>

<style scoped>
.schart-box {
    display: inline-block;
    margin: 20px;
}
.schart {
    width: 600px;
    height: 400px;
}
.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
</style>